<template>
  <div>
    <div class="head">
      <div class="head-left">
        <div class="img">
          <img src="../../assets/default.jpg" alt="">
        </div>
      </div>
      <div class="head-right" v-if="isLogin">
        <div class="name">{{userInfo.username}}</div>
        <div class="head-money">≈&nbsp;{{userInfo.usermoney}}&nbsp;USD</div>
      </div>
      <div v-else class="head-rights">
        <p>请登录</p>
      </div>
    </div>
    <div class="money">
      <div class="left">
        <router-link to="my/sign">
          <div class="left-top"><img src="../../assets/icon/v1/sign.png" alt=""></div>
          <div class="left-bottom">簽約</div>
        </router-link>
      </div>
      <div class="left">
        <router-link to="/transfe">
          <div class="left-top"><img src="../../assets/icon/v1/transfer.png" alt=""></div>
          <div class="left-bottom">劃轉</div>
        </router-link>
      </div>

      <div class="left">
        <router-link to="/transfe/payment">
          <div class="left-top"><img src="../../assets/icon/v1/payment.png" alt=""></div>
          <div class="left-bottom">充值</div>
        </router-link>
      </div>
      <div class="left">
        <router-link to="/transfe/withdraw">
          <div class="left-top"><img src="../../assets/icon/v1/withdraw.png" alt=""></div>
          <div class="left-bottom">提现</div>
        </router-link>
      </div>
    </div>
    <div class="content">
      <router-link to="/orderlist">
        <div class="function">
          <div class="function-imgone"><img src="../../assets/img/my-one.png" alt=""></div>
          <div class="function-name">交易記錄</div>
          <div class="function-point"><img src="../../assets/icon/arrow.png" alt=""></div>
        </div>
      </router-link>
      <router-link to="/userwith">
      <div class="function">
        <div class="function-imgtwo"><img src="../../assets/img/my-two.png" alt=""></div>
        <div class="function-name">資金流水</div>
        <div class="function-point"><img src="../../assets/icon/arrow.png" alt=""></div>
      </div>
      </router-link>
      <router-link to="/respass">
      <div class="function">
        <div class="function-imgthree"><img src="../../assets/img/pwd.png" alt=""></div>
        <div class="function-name">修改密碼</div>
        <div class="function-point"><img src="../../assets/icon/arrow.png" alt=""></div>
      </div>
      </router-link>
      <div class="function" @click="See('https://coinword.io/download.html')">
        <div class="function-imgfour"><img src="../../assets/img/my-three.png" alt=""></div>
        <div class="function-name">app下載</div>
        <div class="function-point"><img src="../../assets/icon/arrow.png" alt=""></div>
      </div>
      <div class="function" @click="go('http://chat.host265.info/im.htm?pid=297ec4616d6b91ae016d769d8d9402a0&lang=zh_TW')">
        <div class="function-imgfive"><img src="../../assets/img/my-four.png" alt=""></div>
        <div class="function-name">官方客服</div>
        <div class="function-point"><img src="../../assets/icon/arrow.png" alt=""></div>
      </div>
      <div class="function">
        <div class="function-imgsix"><img src="../../assets/img/my-five.png" alt=""></div>
        <div class="function-name">切換語言</div>
        <div class="function-point"><img src="../../assets/icon/arrow.png" alt=""></div>
      </div>

    </div>
    <mt-button type="primary" class="loginOut" @click="loginOut">退出登录</mt-button>
    <tabar :isCheck="4"></tabar>
  </div>
</template>

<script>
  import Tabar from '../../components/tabbar'
  import {Button, MessageBox} from 'mint-ui';
  import Vue from 'vue';

  Vue.component(Button.name, Button);
  export default {
    name: "index",
    data() {
      return {
        //true表示已登录 false表示未登录
        isLogin: true,
        userInfo: {}
      }
    },
    methods: {
      See (e) {
        window.location.href = e
      },
      go (e) {
        window.location.href = e
      },
      loginOut() {
        window.localStorage.removeItem('userInfo');
        MessageBox.alert('退出成功').then(action => {
          this.$router.push({path: '/'})
        })
      }
    },
    components: {
      Tabar
    },
    mounted() {
      if (!window.localStorage.getItem('userInfo')) {
        this.$router.push({path: '/'})
      } else {
        this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));

      }

    }
  }
</script>

<style scoped lang="scss">
  .loginOut {
    width: 338px;
    height: 46px;
    margin: 40px 20px 80px 20px;
  }

  .head {
    display: flex;
    flex-direction: row;
    background: AliceBlue;
    width: 100%;
    height: 140px;
  }

  .head-left {
    width: 20%;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center

  }

  .img {
    width: 48px;
    height: 48px;

    img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
  }

  .head-right {
    display: flex;
    flex-direction: column;
    width: 60%;
    height: 140px;
    justify-content: center;
  }

  .head-rights {
    margin-left: 55%;
    height: 140px;
    line-height: 140px;
    font-size: 18px;
    font-weight: bold;
    color: black;
  }

  .money {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 90px;
    font-size: 14px;

    img {
      width: 26px;
      height: 26px;
    }
  }

  .left {
    width: 20%;
    height: 50px;
    margin-left: 28px;
    margin-top: 10px;
  }

  .content {
    display: flex;
    flex-direction: column;
  }

  .function {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 54px;
    font-size: 15px;
    line-height: 54px;
    vertical-align: bottom;
  }

  .function img{
    margin-left: 20px
  }

  .function-name {
    margin-left: 10px;
  }

  .function-point {
    position: absolute;
    right: 34px;

  }
  .function-point  img{
    width: 11px;
    height: 14px;
  }
  .function-imgone img{
    width: 12px;
    height: 15px;
    vertical-align: middle;
  }
  .function-imgtwo img{
    width: 15px;
    height: 15px;
    vertical-align: middle;
  }
  .function-imgthree img{
    width: 15px;
    height: 15px;
    vertical-align: middle;
  }
  .function-imgfour img{
    width: 16px;
    height: 12px;
    vertical-align: middle;
  }
  .function-imgfive img{
    width: 15px;
    height: 13px;
    vertical-align: middle;
  }

  .function-imgsix img{
    width: 15px;
    height: 15px;
    vertical-align: middle;
  }
</style>
